<template>
  <div>
    <el-row v-for="(row, index) of measureRows" :key="index" class="measureRow">
      <el-row :gutter="10">
        <el-col :span="4">前缀</el-col>
        <el-col :span="8">
          <el-input v-model="row.prefix"></el-input>
        </el-col>
        <el-col :span="4">颜色</el-col>
        <el-col :span="4">
          <el-color-picker show-alpha v-model="row.prefixColor"></el-color-picker>
        </el-col>
        <el-col :span="4">
          <el-button icon="el-icon-plus" type="primary" circle @click="handleAddMeasure"></el-button>
        </el-col>
      </el-row>
      
      <el-row :gutter="10">
        <el-col :span="4">文本</el-col>
        <el-col :span="8">
          <el-input v-model="row.text"></el-input>
        </el-col>
        <el-col :span="4">颜色</el-col>
        <el-col :span="4">
          <el-color-picker show-alpha v-model="row.textColor"></el-color-picker>
        </el-col>
        <el-col :span="4">
          <el-button icon="el-icon-minus" type="danger" circle @click="handleDeleteMeasure(index)"></el-button>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'MeasurePanel',
  data() {
    return {
      test: 'test',
      measureRows: [{
        prefix: '',
        prefixColor: '#ffffff',
        text: '',
        textColor: '#ffff00'
      }]
    }
  },
  methods: {
    handleAddMeasure() {
      this.measureRows.push({
        prefix: '',
        prefixColor: '#ffffff',
        text: '',
        textColor: '#ff0000'
      })
    },

    handleDeleteMeasure(index) {
      this.measureRows.splice(index, 1)
    },

    setMeasureInfo(rows) {
      this.measureRows = []
      if (rows) {
        for (const row of rows) {
          if (row.length !== 2) {
            continue
          }

          this.measureRows.push({
            prefix: row[0].text,
            prefixColor: row[0].fill,
            text: row[1].text,
            textColor: row[1].fill
          })
        }
      }
      if (this.measureRows.length === 0) {
        this.measureRows.push({
          prefix: '',
          prefixColor: '#ffffff',
          text: '',
          textColor: '#ffff00'
        })
      }
    },

    getMeasureInfo() {
      const rows = []
      for (const measureRow of this.measureRows) {
        const row = []
        row.push({
          text: measureRow.prefix,
          fontSize: 12,
          fontFamily: 'serif',
          fill: measureRow.prefixColor,
          strokeWidth: 1
        })
        row.push({
          text: measureRow.text,
          fontSize: 12,
          fontFamily: 'serif',
          fill: measureRow.textColor,
          strokeWidth: 1
        })

        rows.push(row)
      }
      return rows
    }
  }
}
</script>

<style scoped>
.measureRow {
  border: 1px solid #b7b7b7; 
  padding: 5px;
  margin-bottom: 2px;
}
</style>